<template>
	<view class="container page">
	  <view class="panel">
	    <view class="barcode">
	      <canvas canvas-id="barcode" />
		  <u-gap height="80" bg-color="#bbb"></u-gap>
		  <u-button type="success" @click="drawBarCode">获取结束码</u-button>
	    </view>
	  </view>
	</view>
</template>

<script>
	var wxbarcode = require('../../../utils/request/indexCode.js')
	import { getEndCode } from '../../../utils/index.js'
	export default {	
		data() {
			return {
				endStr: '' 							//结束码字符串
			}
		},
		methods: {
			// 从后端获取结束码的字符串
			async getEndString() {
				const {data} = await getEndCode()
				this.endStr = data.data
			},
			// 绘制一维码，绑定在按钮上，点击获取
			drawBarCode() {
				wxbarcode.barcode('barcode', this.endStr, 670, 200)
			}
		},
		// 进入页面以后从后端获取结束码字符串
		onLoad: function (options)  {
			this.getEndString()
		}
	}
</script>


<style lang="scss" scoped>
page {
	background-color: #439057
}

.page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center
}

.container {
	padding-bottom: 10rpx
}

.panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	box-sizing: border-box;
	width: 710rpx;
	margin-top: 40rpx;
	border-radius: 10rpx;
	background-color: #fff
}

.barcode {
	display: flex;
	height: 320rpx;
	flex-direction: column;
	justify-content: center;
	align-items: center
}

.barcode > canvas {
	width: 680rpx;
	height: 200rpx
}
</style>
